<template>
    <div class="body-box">
        <el-container>
            <el-aside width="200px" style="background: rgb(84, 92, 100); border-bottom: 2px solid #ccc;">
                <el-col style="width: 100%;">
                    <!-- <h5>自定义颜色</h5> -->
                    <el-menu style="width: 200.8px;" default-active="1-1" class="el-menu-vertical-demo"
                        @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff"
                        active-text-color="#06f" :router="true">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-document"></i>
                                <span>文件管理</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">文件修改</template>
                                <el-menu-item index="1-1" route="/jsonv">JsonView</el-menu-item>
                                <el-menu-item index="1-2">持续更新</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="API调试">
                                <el-menu-item index="1-3">离线API</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-aside>
            <el-container>
                <el-header style="background: #fff;">
                    欢迎进入JSONView编辑系统
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    export default {
        name: "MainNav"
    }
</script>
<style scoped>
    .body-box {
        width: 100%;
        height: 100%;
        /* border: 1px solid red; */
    }

    .body-box .el-header {
        display: flex;
        align-items: center;
        font-size: 30px;
        font-weight: 600;
        /* border: 1px solid red; */
    }

    .body-box .el-container {
        height: 100%;
        /* border: 1px solid red; */

    }

    .body-box .el-container .el-aside {
        /* border: 1px solid red; */
        width: 100%;
        overflow-x: hidden;


    }

    .body-box .el-container .el-main {
        /* border: 1px solid red; */
        width: 100%;
        margin: 0;
        padding: 0;

    }

    .body-box .el-aside .el-menu {
        width: 100%;
    }

    .body-box .el-aside .el-menu .el-submenu {
        width: 100%;
    }

    .body-box .el-aside .el-menu .el-submenu .el-menu-item {
        width: 100%;
    }

    .body-box .el-aside .el-menu .el-submenu .el-menu-item-group {
        width: 100%;
    }

    .body-box .el-aside .el-menu .el-submenu .el-menu-item-group .el-menu-item {
        width: 100%;
    }

    .el-container .el-aside .menu .el-row .el-col.el-col-12 {
        /* border: 1px solid red; */
        width: 100%;
        height: 100%;
        /* background: #fff; */

    }
</style>